<head>
	<style type="text/css" media="screen">@import "../jqt/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "../jqt/theme.css";</style>
	<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../geoutil.js" type="text/javascript" charset="utf-8"></script>
	<script src="../jqt/jqtouch.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch();
	var cgiPath = '/~mkrieger/cgi-bin/';
	
	$(document).ready(function(){
		$('#review-form').attr('action', cgiPath + 'savereview.php');
		$.getJSON(cgiPath + 'getcafes.php', function(response){
			for (var cafe in response) {
				var fullname = response[cafe].full_name;
				var address = response[cafe].address;
				var newDiv = $("<div class='cafe-info'></div>");
				newDiv.attr("id", cafe);
				var toolbar = $("<div class='toolbar'></div>");
				$("<h1>" + fullname + "</h1>").appendTo(toolbar);
				$("<a href='#' class='back'>Back</a>").appendTo(toolbar);
				toolbar.appendTo(newDiv);

				var newList = $("<ul class='info-list'></ul>").appendTo(newDiv);
				$("<li>" + fullname + "</li>").appendTo(newList);
				$("<li>at: " + address + "</li>").appendTo(newList);
				newDiv.appendTo(document.body);
				$('<li><a href="#' + cafe + '">' + response[cafe].full_name + '</li></a>').appendTo('#cafelist');
				var reviewLink = $('<li id="review-' + cafe + '"><a href="#postreview">Post a Review</a></li>').appendTo(newList);
				reviewLink.click(function(){
					var cafeID = $(this).attr("id").split('-')[1];
					var thisCafe = response[cafeID];
					$("#reviewing-cafe-name").html(thisCafe.full_name);
					$("#reviewing-cafe-id").val(cafeID);
				})
			}
		})
	})
</script>
</head>
<body>
	<div id="home" class="current">
		<div class="toolbar">
			<h1>Campus Cafes</h1>
		</div>
		<ul id="cafelist"></ul>
	</div>
	<div id="postreview">
		<div class="toolbar">
			<h1>Post a Review</h1>
			<a href="#" class="back">Back</a>
		</div>
		<form id='review-form' method='POST'>
				<input type="hidden" name='cafeid' id="reviewing-cafe-id" />
            <ul class="edit rounded">
				<li>Review for: <span id="reviewing-cafe-name"></span></li>
                <li><input type="text" name="username" placeholder="Your name" id="some_name" /></li>
				<li>
				<select name="score">
					<option value="none">How good was the food?</option>
				    <optgroup label="Positive">
				        <option value="5">Amazing</option>
				        <option value="4">Pretty Good</option>
				    </optgroup>
				    <optgroup label="Negative">
				        <option value ="2">Not very good</option>
				        <option value ="1">Terrible</option>
				    </optgroup>
				</select>
				</li>
			</ul>
			<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
		</form>
	</div>
</body>